<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Variable Frequency Drive</title>
  <script type="text/javascript" src="../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../highlightCode.js"></script>
  <link href='../../highlight.css' rel='stylesheet' />
 <script src="https://d3js.org/d3.v4.min.js"></script>

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js"></script>



<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body  style='padding:10px;font-family:arial'>
    <div id=container>

<center>
<h4>Variable Frequency Drive</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
   This shows both the field-mounted process control Variable Frequency Drive and an interactive SVG SCADA drawing of the associated Variable Frequency Drive with a strip chart. Both VFDs are connected to the Data Stream Network.
   The Process Control VFD is <b>publishing</b> its values to the Data Stream Network and the SCADA VFD is <b>subscribing</b> to those values.


</div>
<table>
<tr>
<td valign=top >
<div style="text-align:justify;width:360px;padding:10px;">
   <b>Sequence Of Operation:</b><p></p>
  Every two(2) seconds the Process Control VFD is publishing its Controller Input (CI) signal, its Hertz (HZ) and Voltage (VAC). The SCADA Variable Frequency Drive then inserts the published values into the strip chart.
  <p></p>

<p></p>
<table><tr><td colspan=2 align=center>Status Pilot Lights:</td></tr>
<tr>
<td><svg width=30 height=30 ><g id=buttonON  transform="matrix(15 0 0 15 15 15)"><circle id="pilotLight" cx="0" cy="0" r="1" fill="url(#greenGradient)"/><line style="visibility:hidden" name="lineOff" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line style="visibility:hidden" name="lineDisabled" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/><circle style="visibility:hidden" name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line style="visibility:hidden" name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g></svg></button>
</td>
<td>This monitors the control circuitry at the VFD, showing it is OK.</td>
</tr>

<tr>
<td><svg width=30 height=30 ><g xmlns="http://www.w3.org/2000/svg" id="pilotLight1525005775062" transform="translate(15 15)scale(15)" myStatus="ALARM" opacity="1.0" class="hmiElem"><circle id="pilotLight" cx="0" cy="0" r="1" fill="url(#redGradient)"/><line style="visibility:visible" name="lineOff" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line style="visibility:hidden" name="lineDisabled" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/><circle style="visibility:hidden" name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line style="visibility:hidden" name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g></svg>
</td>
<td>This monitors the control circuitry at the VFD, showing it has alarmed and has shut down the VFD.</td>
</tr>


<tr>
<td><svg width=30 height=30 ><g xmlns="http://www.w3.org/2000/svg" id="pilotLight1525005816428" transform="translate(15 15)scale(15)" myStatus="INTERMITTENT" opacity="1.0" class="hmiElem"><circle id="pilotLight" cx="0" cy="0" r="1" fill="url(#violetGradient)"/><line style="visibility:hidden" name="lineOff" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line style="visibility:hidden" name="lineDisabled" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/><circle style="visibility:hidden" name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line style="visibility:hidden" name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g></svg>
</td>
<td>This shows that the VFD is operating properly with a control signal  making changes to the pump's speed.</td>
</tr>


<tr>
<td><svg width=30 height=30 ><g xmlns="http://www.w3.org/2000/svg" id="pilotLight1525005854118" transform="translate(15 15)scale(15)" myStatus="DEFECTIVE" opacity="1.0" class="hmiElem"><circle id="pilotLight" cx="0" cy="0" r="1" fill="url(#aquaGradient)"/><line style="visibility:hidden" name="lineOff" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line style="visibility:hidden" name="lineDisabled" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/><circle style="visibility:visible" name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line style="visibility:visible" name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g></svg>
</td>
<td>This shows the VFD is defective, and shutdown for maintenance.</td>
</tr>
<tr>
<td><svg width=30 height=30 ><g xmlns="http://www.w3.org/2000/svg" id="pilotLight1525005893753" transform="translate(15 15)scale(15)" myStatus="NORMAL OFF" opacity="1.0" class="hmiElem"><circle id="pilotLight" cx="0" cy="0" r="1" fill="url(#greyGradient)"/><line style="visibility:visible" name="lineOff" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line style="visibility:visible" name="lineDisabled" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/><circle style="visibility:hidden" name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line style="visibility:hidden" name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g></svg>
</td>
<td>This shows the VFD has been normally shut off.</td>
</tr>
</table>
</div>

</td>
<td>
<div id="svgDiv" style='border:1px solid black;width:800px;height:600px;'>

<svg xmlns="http://www.w3.org/2000/svg" id="mySVG" width="800" height="600" viewBox="0 0 800 600" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><style xmlns="http://www.w3.org/1999/xhtml">.gridVFD line {stroke: black;stroke-opacity: 0.5;}.gridVFD path {stroke-width: 0;}.axisRed line{stroke: red;}.axisRed path{stroke: red;}.axisBlue line{stroke: blue;}.axisBlue path{stroke: blue;}.axisPurple line{stroke: purple;}.axisPurple path{stroke: purple;}.chartLineCI {fill: none;stroke: purple;stroke-width: 3;}.chartLineVAC {fill: none;stroke: red;stroke-width: 3;}.chartLineHZ {fill: none;stroke: blue;stroke-width: 3;}.axisBlue line{stroke: blue;}.axisBlue path{stroke: blue;}</style><defs xmlns="http://www.w3.org/1999/xhtml"></defs>
<defs>
<foreignObject id=vfdFO width=400 height=60 transform="translate(290,400)" >
 <table cellspacing=5>
<tr>
<td><input type="text" style='border:6px inset purple;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px' value="20" /></td>
<td><input type="text" style='border:6px inset blue;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px' value="74" /></td>
<td><input type="text" style='border:6px inset red;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px' value="403" /></td>
</tr>
<tr align=center style='font-weight:bold;font-size:25px'><td style='color:purple'>CI</td><td style='color:blue'>HZ</td><td style='color:red'>VAC</td></tr>
 </table>
 </foreignObject>
<g id=statusStickCloneG >
    <rect x="-25" y="-130" rx="8" ry="8" stroke="black" stroke-width="2" fill="ghostwhite" width="50" height="260">
    </rect>

    <g id="onStatusScada" transform="translate(0,100)scale(22)" opacity="1">
        <circle id="pilotLightON" cx="0" cy="0" r="1" fill="url(#greenGradient)">
        </circle>
    </g>
    <g id="alarmStatusScada" transform="translate(0,50)scale(22)" opacity=".25">
        <circle id="pilotLightALARM" cx="0" cy="0" r="1" fill="url(#redGradient)">
        </circle>
        <line name="lineAlarm" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1">
        </line>
    </g>
    <g id="intermittentStatusScada" transform="translate(0,0)scale(22)" opacity="1">
        <circle id="pilotLightINTERMITTENT" cx="0" cy="0" r="1" fill="url(#violetGradient)">
        </circle>
    </g>
    <g id="defectiveStatusScada" transform="translate(0,-50)scale(22)" opacity=".25">
        <circle id="pilotLightDEFECTIVE" cx="0" cy="0" r="1" fill="url(#aquaGradient)">
        </circle>
        <circle name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none">
        </circle>
        <line name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08">
        </line>
    </g>
    <g id="offStatusScada" transform="translate(0,-100)scale(22)" opacity=".25">
        <circle id="pilotLightOFF" cx="0" cy="0" r="1" fill="url(#greyGradient)">
        </circle>
        <line name="lineDisabled1" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1">
        </line>
        <line name="lineDisabled2" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1">
        </line>
    </g>
    <rect x=-25 y=-150  stroke="none"  fill="white" width=50 height=300 opacity=0 />

</g>


</defs>
<g id="containerG" >
    <g id="topG" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">



<path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="5" stroke-opacity="1.0" stroke-dasharray="8 4" d="M 37 31 L 736 31" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="5" stroke-opacity="1.0" stroke-dasharray="8 4" d="M 199 73 L 199 31" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="5" stroke-opacity="1.0" stroke-dasharray="8 4" d="M 569 200 L 569 31" rightAngle="true"/><rect stroke="#FF0000" stroke-width="3" fill="white" fill-opacity="0" stroke-dasharray="8 4" rx="7.5" ry="7.5" transform="matrix(1 0 0 1 418 202)" width="313" height="318" rotateAngle="0"/><rect stroke="#9932CC" stroke-width="3" fill="white" fill-opacity="0" stroke-dasharray="8 4" rx="7.5" ry="7.5" transform="matrix(1 0 0 1 437 262)" width="272" height="237" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 550 201 L 550 259" rightAngle="true" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 593 201 L 593 261" rightAngle="true" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 634 203 L 634 261" rightAngle="true" rotateAngle="0" stroke-dasharray="8 4"/><path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 508 204 L 508 261" rightAngle="true" rotateAngle="0"/><polygon stroke="#FF0000" stroke-width="2" fill="#FF0000" fill-opacity="1.0" vCnt="3" radius="100" transform="matrix(0.866025 0.5 -0.5 0.866025 199 165)" points="100 0 -50 -86.6025 -50 86.6025" rotateAngle="30.000010690579252"/><text font-family="Arial" font-size="20" font-weight="bold" font-style="italic" stroke="none" stroke-width="0.4" fill="#000000" transform="matrix(1 0 0 1 135 591)" rotateAngle="0" filter="null">
Process Control</text><text font-family="Arial" font-size="20" font-weight="bold" font-style="italic" stroke="none" stroke-width="0.4" fill="#000000" transform="matrix(1 0 0 1 495 591)" rotateAngle="0" filter="null">
Interactive SCADA</text><text font-family="Arial" font-size="17" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#9400D3" transform="matrix(1 0 0 1 531 492)" rotateAngle="0">
Browser</text><text font-family="Arial" font-size="17" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#FF0000" transform="matrix(1 0 0 1 514 515)" rotateAngle="0">
JavaScript SDK</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 498 195)" rotateAngle="0">
CI</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 537 195)" rotateAngle="0">
HZ</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 576 194)" rotateAngle="0">
VAC</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 626 195)" rotateAngle="0">
Status</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0.4" fill="#000000" transform="matrix(1 0 0 1 130 210)" rotateAngle="0" filter="null">
CI</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 158 210)" rotateAngle="0">
HZ</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 189 210)" rotateAngle="0">
VAC</text><text font-family="Arial" font-size="15" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 235 210)" rotateAngle="0">
Status</text><text font-family="Georgia" font-size="30" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 172 129)" rotateAngle="0">
IoT</text><text font-family="Arial" font-size="20" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#FF0000" transform="matrix(1 0 0 1 288 20)" rotateAngle="0">
Data Stream Network</text><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrow000000)" d="M 140 298 L 140 215" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrow000000)" d="M 170 298 L 170 216" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrow000000)" d="M 208 298 L 208 214" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1.5" stroke-opacity="1.0" marker-end="url(#arrow000000)" d="M 254 298 L 254 216" stroke-dasharray="8 4" rightAngle="true"/><text font-family="Arial" font-size="30" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 216 88)" rotateAngle="0">
Variable Frequency Drive</text>


<g id="vfdPROCESS" transform="matrix(0.5 0 0 0.5 60 297)" title="Pump Variable Frequency" faceColor="#DCDCDC" scale="0.5"><rect id="faceRect" height="500" width="600" rx="20" ry="20" fill="#DCDCDC" stroke="black" stroke-width="3"/><text id="vfdTitle" x="300" dy="1em" font-family="arial" font-size="40" font-weight="bold" text-anchor="middle">Pump Variable Frequency</text>
<text font-size=60 x=40 y=250>Field Control Device</text>
<g  transform="translate(70,90)" pointer-events="none" display="none"><rect width="400" height="260" stroke="none" fill="ghostWhite"/><defs><clipPath id="clip"><rect width="400" height="260"/></clipPath></defs><g class="gridVFD" transform="translate(0,260)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,-260V0.5H400.5V-260"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(33.83333333333333,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(67.16666666666666,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(100.5,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(133.83333333333331,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(167.16666666666669,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(200.5,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(233.83333333333334,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(267.16666666666663,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(300.5,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(333.83333333333337,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(367.16666666666663,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g><g class="tick" opacity="1" transform="translate(400.5,0)"><line stroke="#000" y2="-260"/><text fill="#000" y="3" dy="0.71em"/></g></g><g class="gridVFD" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M400,260.5H0.5V0.5H400"/><g class="tick" opacity="1" transform="translate(0,260.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,234.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,208.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,182.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,156.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,130.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,104.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,78.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,52.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,26.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="#000" x2="400"/><text fill="#000" x="-3" dy="0.32em"/></g></g><g class="x axis" transform="translate(0,260)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H400.5V6"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">0</text></g><g class="tick" opacity="1" transform="translate(33.83333333333333,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">5</text></g><g class="tick" opacity="1" transform="translate(67.16666666666666,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">10</text></g><g class="tick" opacity="1" transform="translate(100.5,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">15</text></g><g class="tick" opacity="1" transform="translate(133.83333333333331,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">20</text></g><g class="tick" opacity="1" transform="translate(167.16666666666669,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">25</text></g><g class="tick" opacity="1" transform="translate(200.5,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">30</text></g><g class="tick" opacity="1" transform="translate(233.83333333333334,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">35</text></g><g class="tick" opacity="1" transform="translate(267.16666666666663,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">40</text></g><g class="tick" opacity="1" transform="translate(300.5,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">45</text></g><g class="tick" opacity="1" transform="translate(333.83333333333337,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">50</text></g><g class="tick" opacity="1" transform="translate(367.16666666666663,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">55</text></g><g class="tick" opacity="1" transform="translate(400.5,0)"><line stroke="#000" y2="6"/><text fill="black" y="9" dy="0.71em" font-size="24" stroke="black" stroke-width=".5">60</text></g></g><text x="200" y="305" font-family="arial" font-size="25" text-anchor="middle">Minutes</text><text font-size="30" fill="purple" stroke="black" stroke-width="1" font-weight="bold" transform="translate(-60,-20)">CI (%)</text><text font-size="30" fill="blue" stroke="black" stroke-width="1" font-weight="bold" transform="translate(400,-20)">HZ</text><text font-size="30" fill="red" stroke="black" stroke-width="1" font-weight="bold" transform="translate(460,-20)">VAC</text><g class="y axis left axisPurple" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,260.5H0.5V0.5H-6"/><g class="tick" opacity="1" transform="translate(0,260.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">0</text></g><g class="tick" opacity="1" transform="translate(0,234.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">10</text></g><g class="tick" opacity="1" transform="translate(0,208.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">20</text></g><g class="tick" opacity="1" transform="translate(0,182.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">30</text></g><g class="tick" opacity="1" transform="translate(0,156.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">40</text></g><g class="tick" opacity="1" transform="translate(0,130.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">50</text></g><g class="tick" opacity="1" transform="translate(0,104.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">60</text></g><g class="tick" opacity="1" transform="translate(0,78.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">70</text></g><g class="tick" opacity="1" transform="translate(0,52.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">80</text></g><g class="tick" opacity="1" transform="translate(0,26.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">90</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="#000" x2="-6"/><text fill="purple" x="-9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">100</text></g></g><g class="y axis right axisBlue" transform="translate(410,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><path class="domain" stroke="#000" d="M6,260.5H0.5V0.5H6"/><g class="tick" opacity="1" transform="translate(0,260.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">0</text></g><g class="tick" opacity="1" transform="translate(0,240.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">10</text></g><g class="tick" opacity="1" transform="translate(0,220.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">20</text></g><g class="tick" opacity="1" transform="translate(0,200.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">30</text></g><g class="tick" opacity="1" transform="translate(0,180.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">40</text></g><g class="tick" opacity="1" transform="translate(0,160.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">50</text></g><g class="tick" opacity="1" transform="translate(0,140.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">60</text></g><g class="tick" opacity="1" transform="translate(0,120.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">70</text></g><g class="tick" opacity="1" transform="translate(0,100.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">80</text></g><g class="tick" opacity="1" transform="translate(0,80.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">90</text></g><g class="tick" opacity="1" transform="translate(0,60.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">100</text></g><g class="tick" opacity="1" transform="translate(0,40.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">110</text></g><g class="tick" opacity="1" transform="translate(0,20.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">120</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="#000" x2="6"/><text fill="blue" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">130</text></g></g><g class="y axis right axisRed" transform="translate(470,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><path class="domain" stroke="#000" d="M6,260.5H0.5V0.5H6"/><g class="tick" opacity="1" transform="translate(0,260.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">0</text></g><g class="tick" opacity="1" transform="translate(0,234.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">50</text></g><g class="tick" opacity="1" transform="translate(0,208.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">100</text></g><g class="tick" opacity="1" transform="translate(0,182.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">150</text></g><g class="tick" opacity="1" transform="translate(0,156.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">200</text></g><g class="tick" opacity="1" transform="translate(0,130.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">250</text></g><g class="tick" opacity="1" transform="translate(0,104.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">300</text></g><g class="tick" opacity="1" transform="translate(0,78.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">350</text></g><g class="tick" opacity="1" transform="translate(0,52.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">400</text></g><g class="tick" opacity="1" transform="translate(0,26.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">450</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="#000" x2="6"/><text fill="red" x="9" dy="0.32em" font-size="24" stroke="black" stroke-width=".5">500</text></g></g><path clip-path="url(#clip)" class="chartLineCI" d="M0,205.4C2.2222222222222223,201.5,4.444444444444445,197.6,6.666666666666667,197.6C8.88888888888889,197.6,11.11111111111111,203.66666666666669,13.333333333333334,205.4C15.555555555555555,207.13333333333333,17.77777777777778,208,20,208C22.22222222222222,208,24.444444444444446,206.70000000000002,26.666666666666668,205.4C28.88888888888889,204.1,31.111111111111107,200.2,33.33333333333333,200.2C35.55555555555555,200.2,37.77777777777778,200.2,40,200.2C42.22222222222222,200.2,44.44444444444444,201.5,46.666666666666664,202.8C48.888888888888886,204.10000000000002,51.111111111111114,208,53.333333333333336,208C55.55555555555556,208,57.77777777777778,197.6,60,197.6C62.22222222222222,197.6,64.44444444444444,197.6,66.66666666666666,197.6C68.88888888888889,197.6,71.1111111111111,202.8,73.33333333333333,202.8C75.55555555555556,202.8,77.77777777777777,202.8,80,202.8C82.22222222222223,202.8,84.44444444444444,208,86.66666666666667,208C88.88888888888889,208,91.11111111111111,195,93.33333333333333,195C95.55555555555556,195,97.77777777777777,197.6,100,197.6C102.22222222222223,197.6,104.44444444444444,195,106.66666666666667,195C108.88888888888889,195,111.11111111111111,205.4,113.33333333333333,205.4C115.55555555555556,205.4,117.77777777777777,205.4,120,205.4C122.22222222222221,205.4,124.44444444444444,197.6,126.66666666666666,197.6C128.88888888888889,197.6,131.1111111111111,203.66666666666669,133.33333333333331,205.4C135.55555555555554,207.13333333333333,137.77777777777777,208,140,208C142.22222222222223,208,144.44444444444443,200.2,146.66666666666666,200.2C148.88888888888889,200.2,151.11111111111111,200.2,153.33333333333334,200.2C155.55555555555557,200.2,157.77777777777777,197.6,160,197.6C162.22222222222223,197.6,164.44444444444446,203.66666666666669,166.66666666666669,205.4C168.8888888888889,207.13333333333333,171.11111111111111,208,173.33333333333334,208C175.55555555555557,208,177.77777777777777,195,180,195C182.22222222222223,195,184.44444444444443,197.6,186.66666666666666,197.6C188.88888888888889,197.6,191.11111111111111,197.6,193.33333333333334,197.6C195.55555555555557,197.6,197.77777777777777,199.33333333333331,200,200.2C202.22222222222223,201.06666666666666,204.44444444444446,201.93333333333334,206.66666666666669,202.8C208.8888888888889,203.66666666666669,211.11111111111111,205.4,213.33333333333334,205.4C215.55555555555557,205.4,217.7777777777778,205.4,220.00000000000003,205.4C222.22222222222223,205.4,224.44444444444446,205.4,226.66666666666666,205.4C228.88888888888889,205.4,231.11111111111111,204.10000000000002,233.33333333333334,202.8C235.55555555555557,201.5,237.77777777777777,197.6,240,197.6C242.22222222222223,197.6,244.44444444444446,202.8,246.66666666666669,202.8C248.88888888888889,202.8,251.11111111111111,197.6,253.33333333333331,197.6C255.55555555555554,197.6,257.77777777777777,200.2,260,200.2C262.22222222222223,200.2,264.4444444444444,200.2,266.66666666666663,200.2C268.88888888888886,200.2,271.1111111111111,200.2,273.3333333333333,200.2C275.55555555555554,200.2,277.77777777777777,205.4,280,205.4C282.22222222222223,205.4,284.44444444444446,199.33333333333331,286.6666666666667,197.6C288.8888888888889,195.86666666666667,291.1111111111111,195,293.3333333333333,195C295.55555555555554,195,297.77777777777777,205.4,300,205.4C302.22222222222223,205.4,304.44444444444446,204.10000000000002,306.6666666666667,202.8C308.8888888888889,201.5,311.1111111111111,197.6,313.3333333333333,197.6C315.55555555555554,197.6,317.77777777777777,203.66666666666669,320,205.4C322.22222222222223,207.13333333333333,324.44444444444446,208,326.6666666666667,208C328.8888888888889,208,331.11111111111114,207.13333333333333,333.33333333333337,205.4C335.5555555555556,203.66666666666669,337.77777777777777,197.6,340,197.6C342.22222222222223,197.6,344.44444444444446,201.06666666666666,346.6666666666667,202.8C348.8888888888889,204.53333333333333,351.1111111111111,208,353.3333333333333,208C355.55555555555554,208,357.77777777777777,197.6,360,197.6C362.22222222222223,197.6,364.4444444444444,200.2,366.66666666666663,200.2C368.88888888888886,200.2,371.1111111111111,198.46666666666667,373.3333333333333,197.6C375.55555555555554,196.73333333333332,377.77777777777777,195,380,195C382.22222222222223,195,384.44444444444446,195.86666666666667,386.6666666666667,197.6C388.8888888888889,199.33333333333331,391.1111111111111,203.66666666666669,393.3333333333333,205.4C395.55555555555554,207.13333333333333,397.77777777777777,207.56666666666666,400,208"/><path clip-path="url(#clip)" class="chartLineVAC" d="M0,44.72C2.2222222222222223,45.5,4.444444444444445,46.28,6.666666666666667,46.28C8.88888888888889,46.28,11.11111111111111,43.853333333333325,13.333333333333334,43.16C15.555555555555555,42.46666666666667,17.77777777777778,42.120000000000005,20,42.120000000000005C22.22222222222222,42.120000000000005,24.444444444444446,46.28,26.666666666666668,46.28C28.88888888888889,46.28,31.111111111111107,33.28,33.33333333333333,33.28C35.55555555555555,33.28,37.77777777777778,48.879999999999995,40,48.879999999999995C42.22222222222222,48.879999999999995,44.44444444444444,35.879999999999995,46.666666666666664,35.879999999999995C48.888888888888886,35.879999999999995,51.111111111111114,46.80000000000001,53.333333333333336,46.80000000000001C55.55555555555556,46.80000000000001,57.77777777777778,31.72,60,31.72C62.22222222222222,31.72,64.44444444444444,50.95999999999998,66.66666666666666,50.95999999999998C68.88888888888889,50.95999999999998,71.1111111111111,42.64000000000001,73.33333333333333,39.52000000000001C75.55555555555556,36.40000000000001,77.77777777777777,32.24000000000001,80,32.24000000000001C82.22222222222223,32.24000000000001,84.44444444444444,34.75333333333333,86.66666666666667,35.879999999999995C88.88888888888889,37.00666666666666,91.11111111111111,39,93.33333333333333,39C95.55555555555556,39,97.77777777777777,36.400000000000006,100,36.400000000000006C102.22222222222223,36.400000000000006,104.44444444444444,37.96000000000001,106.66666666666667,37.96000000000001C108.88888888888889,37.96000000000001,111.11111111111111,35.360000000000014,113.33333333333333,35.360000000000014C115.55555555555556,35.360000000000014,117.77777777777777,48.360000000000014,120,48.360000000000014C122.22222222222221,48.360000000000014,124.44444444444444,40.30000000000001,126.66666666666666,37.96000000000001C128.88888888888889,35.620000000000005,131.1111111111111,34.31999999999999,133.33333333333331,34.31999999999999C135.55555555555554,34.31999999999999,137.77777777777777,40.213333333333324,140,40.56C142.22222222222223,40.90666666666667,144.44444444444443,40.73333333333334,146.66666666666666,41.08000000000001C148.88888888888889,41.42666666666669,151.11111111111111,45.24000000000001,153.33333333333334,45.24000000000001C155.55555555555557,45.24000000000001,157.77777777777777,33.28,160,33.28C162.22222222222223,33.28,164.44444444444446,35.27333333333333,166.66666666666669,37.96000000000001C168.8888888888889,40.64666666666667,171.11111111111111,49.053333333333306,173.33333333333334,49.39999999999998C175.55555555555557,49.74666666666665,177.77777777777777,49.91999999999999,180,49.91999999999999C182.22222222222223,49.91999999999999,184.44444444444443,49.91999999999999,186.66666666666666,49.91999999999999C188.88888888888889,49.91999999999999,191.11111111111111,38.48000000000002,193.33333333333334,38.48000000000002C195.55555555555557,38.48000000000002,197.77777777777777,40.56,200,40.56C202.22222222222223,40.56,204.44444444444446,36.400000000000006,206.66666666666669,36.400000000000006C208.8888888888889,36.400000000000006,211.11111111111111,39,213.33333333333334,39C215.55555555555557,39,217.7777777777778,35.879999999999995,220.00000000000003,35.879999999999995C222.22222222222223,35.879999999999995,224.44444444444446,35.879999999999995,226.66666666666666,35.879999999999995C228.88888888888889,35.879999999999995,231.11111111111111,41.08000000000001,233.33333333333334,41.08000000000001C235.55555555555557,41.08000000000001,237.77777777777777,36.400000000000006,240,36.400000000000006C242.22222222222223,36.400000000000006,244.44444444444446,36.400000000000006,246.66666666666669,36.400000000000006C248.88888888888889,36.400000000000006,251.11111111111111,42.640000000000015,253.33333333333331,42.640000000000015C255.55555555555554,42.640000000000015,257.77777777777777,37.96000000000001,260,37.96000000000001C262.22222222222223,37.96000000000001,264.4444444444444,44.72,266.66666666666663,44.72C268.88888888888886,44.72,271.1111111111111,42.72666666666667,273.3333333333333,42.120000000000005C275.55555555555554,41.51333333333334,277.77777777777777,41.08000000000001,280,41.08000000000001C282.22222222222223,41.08000000000001,284.44444444444446,47.84,286.6666666666667,47.84C288.8888888888889,47.84,291.1111111111111,39.51999999999998,293.3333333333333,37.44C295.55555555555554,35.35999999999999,297.77777777777777,34.31999999999999,300,34.31999999999999C302.22222222222223,34.31999999999999,304.44444444444446,34.839999999999996,306.6666666666667,35.879999999999995C308.8888888888889,36.91999999999999,311.1111111111111,47.84,313.3333333333333,47.84C315.55555555555554,47.84,317.77777777777777,41.08000000000001,320,41.08000000000001C322.22222222222223,41.08000000000001,324.44444444444446,50.95999999999998,326.6666666666667,50.95999999999998C328.8888888888889,50.95999999999998,331.11111111111114,36.400000000000006,333.33333333333337,36.400000000000006C335.5555555555556,36.400000000000006,337.77777777777777,44.20000000000002,340,44.20000000000002C342.22222222222223,44.20000000000002,344.44444444444446,36.920000000000016,346.6666666666667,36.920000000000016C348.8888888888889,36.920000000000016,351.1111111111111,39.17333333333336,353.3333333333333,40.04000000000002C355.55555555555554,40.90666666666669,357.77777777777777,42.120000000000005,360,42.120000000000005C362.22222222222223,42.120000000000005,364.4444444444444,32.24000000000001,366.66666666666663,32.24000000000001C368.88888888888886,32.24000000000001,371.1111111111111,37.96000000000001,373.3333333333333,37.96000000000001C375.55555555555554,37.96000000000001,377.77777777777777,31.72,380,31.72C382.22222222222223,31.72,384.44444444444446,44.72,386.6666666666667,44.72C388.8888888888889,44.72,391.1111111111111,40.56,393.3333333333333,40.56C395.55555555555554,40.56,397.77777777777777,45.5,400,50.44"/><path clip-path="url(#clip)" class="chartLineHZ" d="M0,114C2.2222222222222223,120,4.444444444444445,126,6.666666666666667,126C8.88888888888889,126,11.11111111111111,116,13.333333333333334,116C15.555555555555555,116,17.77777777777778,140,20,140C22.22222222222222,140,24.444444444444446,114,26.666666666666668,114C28.88888888888889,114,31.111111111111107,126.66666666666667,33.33333333333333,128C35.55555555555555,129.33333333333334,37.77777777777778,130,40,130C42.22222222222222,130,44.44444444444444,128,46.666666666666664,128C48.888888888888886,128,51.111111111111114,128,53.333333333333336,128C55.55555555555556,128,57.77777777777778,131,60,132C62.22222222222222,133,64.44444444444444,134,66.66666666666666,134C68.88888888888889,134,71.1111111111111,112,73.33333333333333,112C75.55555555555556,112,77.77777777777777,115,80,116C82.22222222222223,117,84.44444444444444,117,86.66666666666667,118C88.88888888888889,119,91.11111111111111,122,93.33333333333333,122C95.55555555555556,122,97.77777777777777,122,100,122C102.22222222222223,122,104.44444444444444,138,106.66666666666667,138C108.88888888888889,138,111.11111111111111,118,113.33333333333333,118C115.55555555555556,118,117.77777777777777,138,120,138C122.22222222222221,138,124.44444444444444,114,126.66666666666666,114C128.88888888888889,114,131.1111111111111,114,133.33333333333331,114C135.55555555555554,114,137.77777777777777,120,140,120C142.22222222222223,120,144.44444444444443,112,146.66666666666666,112C148.88888888888889,112,151.11111111111111,136,153.33333333333334,136C155.55555555555557,136,157.77777777777777,112,160,112C162.22222222222223,112,164.44444444444446,127.33333333333333,166.66666666666669,130C168.8888888888889,132.66666666666666,171.11111111111111,134,173.33333333333334,134C175.55555555555557,134,177.77777777777777,120,180,120C182.22222222222223,120,184.44444444444443,129.33333333333334,186.66666666666666,132C188.88888888888889,134.66666666666666,191.11111111111111,136,193.33333333333334,136C195.55555555555557,136,197.77777777777777,129,200,126C202.22222222222223,122.99999999999999,204.44444444444446,118,206.66666666666669,118C208.8888888888889,118,211.11111111111111,134,213.33333333333334,134C215.55555555555557,134,217.7777777777778,132.33333333333334,220.00000000000003,130C222.22222222222223,127.66666666666667,224.44444444444446,123.33333333333331,226.66666666666666,120C228.88888888888889,116.66666666666666,231.11111111111111,110,233.33333333333334,110C235.55555555555557,110,237.77777777777777,112,240,112C242.22222222222223,112,244.44444444444446,112,246.66666666666669,112C248.88888888888889,112,251.11111111111111,132,253.33333333333331,132C255.55555555555554,132,257.77777777777777,125.33333333333334,260,122C262.22222222222223,118.66666666666669,264.4444444444444,112,266.66666666666663,112C268.88888888888886,112,271.1111111111111,120.33333333333333,273.3333333333333,124C275.55555555555554,127.66666666666667,277.77777777777777,134,280,134C282.22222222222223,134,284.44444444444446,129.00000000000003,286.6666666666667,126C288.8888888888889,123.00000000000001,291.1111111111111,116,293.3333333333333,116C295.55555555555554,116,297.77777777777777,116.66666666666667,300,118C302.22222222222223,119.33333333333333,304.44444444444446,125.66666666666667,306.6666666666667,128C308.8888888888889,130.33333333333331,311.1111111111111,130.00000000000003,313.3333333333333,132C315.55555555555554,134,317.77777777777777,140,320,140C322.22222222222223,140,324.44444444444446,124,326.6666666666667,124C328.8888888888889,124,331.11111111111114,124,333.33333333333337,124C335.5555555555556,124,337.77777777777777,130,340,130C342.22222222222223,130,344.44444444444446,130,346.6666666666667,130C348.8888888888889,130,351.1111111111111,130,353.3333333333333,130C355.55555555555554,130,357.77777777777777,112,360,112C362.22222222222223,112,364.4444444444444,122,366.66666666666663,122C368.88888888888886,122,371.1111111111111,122,373.3333333333333,122C375.55555555555554,122,377.77777777777777,120,380,120C382.22222222222223,120,384.44444444444446,128.66666666666666,386.6666666666667,130C388.8888888888889,131.33333333333334,391.1111111111111,132,393.3333333333333,132C395.55555555555554,132,397.77777777777777,122,400,112"/></g><g id="statusPanel" transform="translate(150,430)rotate(90)"><!--used at VFD--><rect x="-25" y="-130" rx="8" ry="8" stroke="black" stroke-width="2" fill="ghostwhite" width="50" height="260"/>


<g id="onStatusProcess" transform="translate(0,100)scale(22)" opacity="1" >
    <circle  id="pilotLightONProcess" cx="0" cy="0" r="1" fill="url(#greenGradient)"/></g>
<g id="alarmStatusProcess" transform="translate(0,50)scale(22)" opacity=".25">
    <circle   id="pilotLightALARMProcess" cx="0" cy="0" r="1" fill="url(#redGradient)"/><line pointer-events="none" name="lineAlarm" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/></g>
 <g id="intermittentStatusProcess" transform="translate(0,0)scale(22)" opacity="1">
     <circle   id="pilotLightINTERMITTENTProcess" cx="0" cy="0" r="1" fill="url(#violetGradient)"/></g>
<g id="defectiveStatusProcess" transform="translate(0,-50)scale(22)" opacity=".25">
    <circle   id="pilotLightDEFECTIVEProcess" cx="0" cy="0" r="1" fill="url(#aquaGradient)"/><circle pointer-events="none"  name="circleDefective" cx="0" cy="0" r=".7" stroke="crimson" stroke-width=".2" fill="none"/><line pointer-events="none"  name="lineDefective" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="crimson" stroke-width=".08"/></g>
<g id="offStatusProcess" transform="translate(0,-100)scale(22)" opacity=".25">
    <circle   id="pilotLightOFFProcess" cx="0" cy="0" r="1" fill="url(#greyGradient)"/><line  pointer-events="none" name="lineDisabled1" x1="-.5" y1="-.5" x2=".5" y2=".5" stroke="black" stroke-width=".1"/><line pointer-events="none"  name="lineDisabled2" x1=".5" y1="-.5" x2="-.5" y2=".5" stroke="black" stroke-width=".1"/></g>
   </g><foreignObject id="digital" width="400" height="60" transform="translate(290,400)"> <table xmlns="http://www.w3.org/1999/xhtml" cellspacing="5"><tbody><tr><td><input id=ciProcessValue type="text" style="border:6px inset purple;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px" value="20" /></td><td><input id=hzProcessValue type="text" style="border:6px inset blue;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px" value="74" /></td><td><input id=vacProcessValue type="text" style="border:6px inset red;background:black;color:lime;font-family:times new roman;font-weight:bold;font-size:33px;width:80px" value="403" /></td></tr><tr align="center" style="font-weight:bold;font-size:25px"><td style="color:purple">CI</td><td style="color:blue">HZ</td><td style="color:red">VAC</td></tr> </tbody></table> </foreignObject></g></g></g><circle id="dragDot" class="dragTargetObj" cy="202" r="12" fill="white" fill-opacity=".5" stroke="black" stroke-width="1" vector-effect="non-scaling-stroke" style="visibility: hidden; cursor: default;"/><defs id="pilotLightDefs"><radialGradient id="blueGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="rgb(0,0,255)" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient><radialGradient id="greenGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="rgb(0,191,0)" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient><radialGradient id="greyGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient><radialGradient id="redGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="rgb(255,0,0)" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient><radialGradient id="violetGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="rgb(219,0,219)" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient><radialGradient id="aquaGradient" cx="50%" cy="50%" r="75%"><stop offset="0%" stop-color="aqua" stop-opacity="1"/><stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/></radialGradient></defs><defs id="arrowDefs"><marker id="arrowFF0000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#FF0000" stroke-linejoin="bevel">


<path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/>
</marker><marker id="arrow000000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#000000" stroke-linejoin="bevel">
<path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/>
</marker></defs></svg>
</div>

</td>
</tr></table>

    <br><button title="Show Javascript Source" onclick=showSource()>Javascript Source</button> <button title="Close javascript source" disabled id=closeSourceButton onClick=closeSource()>X</button>

 <div id=sourceDiv style=overflow:auto;width:100%;height:1px;visibility:hidden;overflow:hidden>
  <br>Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:90%;text-align:left; ></div>
</div>
</center>
    </div>
<script id=myScript>
//---JavaScript SDK  https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js ---

//--onload---
var pubnub
function initPublish()
{
    pubnub = new PubNub(
    {
        publishKey : 'pub-c-ea28c028-e01a-4d16-80ec-0ad017c8a0a1',
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
   })

}

//---channels---
var utcms=new Date().getTime() //---timestamp for this example client---

var CI="CI"+utcms
var HZ="HZ"+utcms
var VAC="VAC"+utcms

//---onload: Subscribe---

function publishCI(data_ci)
{
    var publishConfig =
    {
        channel : CI ,  //---unique for this viewer "StatusAlarm"+timeStamp---
        message :data_ci  //---simulated every 2 seconds---
    }
    pubnub.publish(publishConfig)
}
var scadaCI
var subscribeCI
function initSubscribeCI()
{
    subscribeCI = new PubNub(
    {
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
    })
    subscribeCI.addListener(
    {
        message: function(m)
        {
            //---handle message---
            var msg = m.message; //---The Payload---
            scadaCI=msg //--- ciScadaValue & strip chart---

        }
    })
    subscribeCI.subscribe(
    {
        channels: [CI] //---unique for this viewer "CI"+timeStamp---
    })
}

function publishHZ(data_hz)
{
    var publishConfig =
    {
        channel : HZ ,  //---unique for this viewer "HZ"+timeStamp---
        message :data_hz //---simulated every 2 seconds---
    }
    pubnub.publish(publishConfig)
}

var scadaHZ
var subscribeHZ
function initSubscribeHZ()
{
    subscribeHZ = new PubNub(
    {
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
    })
    subscribeHZ.addListener(
    {
        message: function(m)
        {
            //---handle message---
            var msg = m.message; //---The Payload---
            scadaHZ=msg //--- hzScadaValue & strip chart---

        }
    })
    subscribeHZ.subscribe(
    {
        channels: [HZ] //---unique for this viewer "HZ"+timeStamp---
    })
}
function publishVAC(data_vac)
{
    var publishConfig =
    {
        channel : VAC ,  //---unique for this viewer "VAC"+timeStamp---
        message :data_vac  //---simulated every 2 seconds---
    }
    pubnub.publish(publishConfig)
}


var scadaVAC
var subscribeVAC
function initSubscribeVAC()
{
    subscribeVAC = new PubNub(
    {
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
    })
    subscribeVAC.addListener(
    {
        message: function(m)
        {
            //---handle message---
            var msg = m.message; //---The Payload---
            scadaVAC=msg //--- vacScadaValue & strip chart---

        }
    })
    subscribeVAC.subscribe(
    {
        channels: [VAC] //---unique for this viewer "VAC"+timeStamp---
    })
}




</script>
<script>
//---start dataBase-----------
var DataPump=[
{CI:21,VAC:414,HZ:73},
{CI:24,VAC:411,HZ:67},
{CI:21,VAC:417,HZ:72},
{CI:20,VAC:419,HZ:60},
{CI:21,VAC:411,HZ:73},
{CI:23,VAC:436,HZ:66},
{CI:23,VAC:406,HZ:65},
{CI:22,VAC:431,HZ:66},
{CI:20,VAC:410,HZ:66},
{CI:24,VAC:439,HZ:64},
{CI:24,VAC:402,HZ:63},
{CI:22,VAC:424,HZ:74},
{CI:22,VAC:438,HZ:72},
{CI:20,VAC:431,HZ:71},
{CI:25,VAC:425,HZ:69},
{CI:24,VAC:430,HZ:69},
{CI:25,VAC:427,HZ:61},
{CI:21,VAC:432,HZ:71},
{CI:21,VAC:407,HZ:61},
{CI:24,VAC:427,HZ:73},
{CI:21,VAC:434,HZ:73},
{CI:20,VAC:422,HZ:70},
{CI:23,VAC:421,HZ:74},
{CI:23,VAC:413,HZ:62},
{CI:24,VAC:436,HZ:74},
{CI:21,VAC:427,HZ:65},
{CI:20,VAC:405,HZ:63},
{CI:25,VAC:404,HZ:70},
{CI:24,VAC:404,HZ:64},
{CI:24,VAC:426,HZ:62},
{CI:23,VAC:422,HZ:67},
{CI:22,VAC:430,HZ:71},
{CI:21,VAC:425,HZ:63},
{CI:21,VAC:431,HZ:65},
{CI:21,VAC:431,HZ:70},
{CI:22,VAC:421,HZ:75},
{CI:24,VAC:430,HZ:74},
{CI:22,VAC:430,HZ:74},
{CI:24,VAC:418,HZ:64},
{CI:23,VAC:427,HZ:69},
{CI:23,VAC:414,HZ:74},
{CI:23,VAC:419,HZ:68},
{CI:21,VAC:421,HZ:63},
{CI:24,VAC:408,HZ:67},
{CI:25,VAC:428,HZ:72},
{CI:21,VAC:434,HZ:71},
{CI:22,VAC:431,HZ:66},
{CI:24,VAC:408,HZ:64},
{CI:21,VAC:421,HZ:60},
{CI:20,VAC:402,HZ:68},
{CI:21,VAC:430,HZ:68},
{CI:24,VAC:415,HZ:65},
{CI:22,VAC:429,HZ:65},
{CI:20,VAC:423,HZ:65},
{CI:24,VAC:419,HZ:74},
{CI:23,VAC:438,HZ:69},
{CI:24,VAC:427,HZ:69},
{CI:25,VAC:439,HZ:70},
{CI:24,VAC:414,HZ:65},
{CI:21,VAC:422,HZ:64},
{CI:20,VAC:403,HZ:74}

]

var lineCIPumpVFD
var lineHZPumpVFD
var lineVACPumpVFD
var Data
document.addEventListener("onload",init(),false)
 var processStatusInterval //
 var scadaStatusInterval

 var publishDataInterval //---process---
 var subscribeDataInterval //---scada--

function init()
{
  buildVFDMonitor("pumpVFD", "Pump Variable Frequency",60,"Minutes","#ffd700",.4,448,274);

     initPublish()
    initSubscribeCI()
    initSubscribeHZ()
    initSubscribeVAC()

    showSourceJS()

   processStatusInterval=setInterval("intervalProcess()",1000)
   scadaStatusInterval=setInterval("intervalScada()",1000)
  publishDataInterval=setInterval("publishData()",2000)



}

//---every 2 seconds---
function publishData()
{
    var ci=Math.round(Math.random()*5)+20
    var hz=Math.round(Math.random()*15)+60
    var vac=Math.round(Math.random()*40)+400
    publishCI(ci)
    publishHZ(hz)
    publishVAC(vac)


    ciProcessValue.value=ci
    hzProcessValue.value=hz
    vacProcessValue.value=vac
    setTimeout(slidePumpStripChart,500)


}



function intervalProcess()
{

    if(intermittentStatusProcess.getAttribute("opacity")=="1")
        intermittentStatusProcess.setAttribute("opacity",.6)
    else
        intermittentStatusProcess.setAttribute("opacity",1)


}
function intervalScada()
{

      var gz=statuspumpVFD.getElementsByTagName("g")
      var onStatus=gz[0]
      var alarmStatus=gz[1]
      var intermittentStatus=gz[2]
      var defectiveStatus=gz[3]
      var offStatus=gz[4]

    if(intermittentStatus.getAttribute("opacity")=="1")
        intermittentStatus.setAttribute("opacity",.6)
    else
        intermittentStatus.setAttribute("opacity",1)

}



//======================VFD MONITOR OBJECT========================================
function buildVFDMonitor(id,title,timeLine,timeLineUnits,faceColor,scale,transX,transY)
{

    var defaultWidth=600
    var defaultHeight=500

    var svg=d3.select("#mySVG")
    //---container---
    var vfdG=svg.append("g")
    .attr("id",id)
    .attr("text-rendering","geometricPrecision")
    .attr("shape-rendering","geometricPrecision")
    .attr("transform","translate("+transX+","+transY+")scale("+scale+")")

    //---face rectangle---
    vfdG.append("rect")
    .attr("id","faceRect"+id)
    .attr("height",defaultHeight)
    .attr("width",defaultWidth)
    .attr("rx",20)
    .attr("ry",20)
    .attr("fill",faceColor)
    .attr("stroke","black")
    .attr("stroke-width",3)

    var myTitle=vfdG.append("text")
    .attr("id","vfdTitle"+id)
    .text(title)
    .attr("x",defaultWidth/2)
    .attr("dy","1em")
    .attr("font-family","arial")
    .attr("font-size","40")
    .attr("font-weight","bold")
    .attr("text-anchor","middle")

    //---chart size---
    var width=400
    var height=260
    //---timeline---
    var xTime = d3.scaleLinear()
    .domain([0, timeLine])
    .range([0, width])

    //---controller analog input---
    var yCI = d3.scaleLinear()
    .domain([0, 100]) // percent
    .range([height, 0]); // output
    //---hertz value---
    var yHZ = d3.scaleLinear()
    .domain([0, 130]) // input
    .range([height, 0]); // output
    //---voltage value---
    var yVAC = d3.scaleLinear()
    .domain([0, 500]) // input
    .range([height, 0]); // output


    // gridlines in x axis function
    function make_x_gridlines() {
    return d3.axisBottom(xTime)
    }

    // gridlines in y axis function
    function make_y_gridlines() {
    return d3.axisLeft(yCI)
    }


    var plotG=vfdG.append("g")
    .attr("id","plotG"+id)
    .attr("transform","translate(70,90)")


    plotG.append("rect")
    .attr("id","plotRect")
    .attr("width",width)
    .attr("height",height)
    .attr("stroke","none")
    .attr("fill","ghostWhite")
    var defs=plotG.append("defs")
    defs.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height)
    //.attr("transform", "translate(100,50)")

    // add the X gridlines
    plotG.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_gridlines()
    .tickSize(-height)
    .tickFormat("")
    )

    // add the Y gridlines
    plotG.append("g")
    .attr("class", "grid")
    .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat("")
    )




    // Call the x axis timeLine in a group tag
    plotG.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height+ ")")
    .call(d3.axisBottom(xTime)) // Create an axis component with d3.axisBottom
    .selectAll("text")
    .attr("font-size","24")
    .attr("fill","black")
    .attr("stroke","black")
    .attr("stroke-width",".5")

    var unitText=plotG.append("text")
    .text(timeLineUnits)
    .attr("x",width/2)
    .attr("y",height+45)
    .attr("font-family","arial")
    .attr("font-size","25")
    .attr("text-anchor","middle")


    // Call the CI y axis in a group tag
    var CI=plotG.append("text")
    .text("CI (%)")
    .attr("font-size",30)
    .attr("fill","purple")
    .attr("stroke","black")
    .attr("stroke-width","1")
    .attr("font-weight","bold")
    .attr("transform","translate(-60,-20)")

    var HZ=plotG.append("text")
    .text("HZ")
    .attr("font-size",30)
    .attr("fill","blue")
    .attr("stroke","black")
    .attr("stroke-width","1")
    .attr("font-weight","bold")
    .attr("transform","translate(400,-20)")
    var VAC=plotG.append("text")
    .text("VAC")
    .attr("font-size",30)
    .attr("fill","red")
    .attr("stroke","black")
    .attr("stroke-width","1")
    .attr("font-weight","bold")
    .attr("transform","translate(460,-20)")



    plotG.append("g")
    .attr("class", "y axisPurple")
    .call(d3.axisLeft(yCI))
    .selectAll("text")
    .attr("font-size","24")
    .attr("fill","purple")
    .attr("stroke","black")
    .attr("stroke-width",".5")

    plotG.append("g")
    .attr("class", "y axis right axisBlue")
    .attr("transform", "translate("+(width+10)+",0)")
    .call(d3.axisRight(yHZ))
    .selectAll("text")
    .attr("font-size","24")
    .attr("fill","blue")
    .attr("stroke","black")
    .attr("stroke-width",".5")

    plotG.append("g")
    .attr("class", "y axis right axisRed")
    .attr("transform", "translate("+(width+70)+",0)")
    .call(d3.axisRight(yVAC))
    .selectAll("text")
    .attr("font-size","24")
    .attr("fill","red")
    .attr("stroke","black")
    .attr("stroke-width",".5")

    //--Data and Data Lines/Paths-->
    //---{CI,VAC,HZ} ---

          lineCIPumpVFD = d3.line()
        .x(function(d, i) { return xTime(i); }) // set the x values for the line generator
        .y(function(d) { return yCI(d.CI); }) // set the y values for the line generator
        .curve(d3.curveMonotoneX) // apply smoothing to the line

        lineVACPumpVFD  = d3.line()
        .x(function(d, i) { return xTime(i); }) // set the x values for the line generator
        .y(function(d) { return yVAC(d.VAC); }) // set the y values for the line generator
        .curve(d3.curveMonotoneX) // apply smoothing to the line

        lineHZPumpVFD = d3.line()
        .x(function(d, i) { return xTime(i); }) // set the x values for the line generator
        .y(function(d) { return yHZ(d.HZ); }) // set the y values for the line generator
        .curve(d3.curveMonotoneX) // apply smoothing to the line
    // Append the path, bind the data, and call the line generator

        Data=DataPump


        var pathCI=plotG.append("path")
        .attr("clip-path", "url(#clip)")
        .datum(Data) // 10. Binds data to the line
        .attr("class", "chartLineCI") // Assign a class for styling
        .attr("d", lineCIPumpVFD); // 11. Calls the line generator
        pathCI.attr("id","pathCI"+id)

        var pathVAC=plotG.append("path")
        .attr("clip-path", "url(#clip)")
        .datum(Data) // 10. Binds data to the line
        .attr("class", "chartLineVAC") // Assign a class for styling
        .attr("d", lineVACPumpVFD); // 11. Calls the line generator
        pathVAC.attr("id","pathVAC"+id)

        var pathHZ=plotG.append("path")
        .attr("clip-path", "url(#clip)")
        .datum(Data) // 10. Binds data to the line
        .attr("class", "chartLineHZ") // Assign a class for styling
        .attr("d", lineHZPumpVFD); // 11. Calls the line generator
        pathHZ.attr("id","pathHZ"+id)


    var statusStick=statusStickCloneG.cloneNode(true)
    statusStick.setAttribute("id","status"+id)
    statusStick.setAttribute("transform","translate(150,430)rotate(90)")
    document.getElementById(id).appendChild(statusStick)


    var fo=vfdFO.cloneNode(true)
    fo.setAttribute("id","digital"+id)
    document.getElementById(id).appendChild(fo)

}

//==================END VFD OBJECT======================================



function slidePumpStripChart()
{
    var width=400
    var data={CI:scadaCI,VAC:scadaVAC,HZ:scadaHZ}


    DataPump.push(data)//---{CI,VAC,HZ}



    var pathVAC=d3.select("#pathVACpumpVFD")
    var pathCI=d3.select("#pathCIpumpVFD")
    var pathHZ=d3.select("#pathHZpumpVFD")

    pathVAC.attr("d", lineVACPumpVFD)
    .attr("transform", null);
    pathCI.attr("d", lineCIPumpVFD)
    .attr("transform", null);
    pathHZ.attr("d", lineHZPumpVFD)
    .attr("transform", null);

    pathVAC.transition().duration(850).attr("transform", "translate(" + -width/60 + ",0)")
    pathCI.transition().duration(850).attr("transform", "translate(" + -width/60 + ",0)")
    pathHZ.transition().duration(850).attr("transform", "translate(" + -width/60 + ",0)")

    //---add digital values---
    var digitalCI=digitalpumpVFD.getElementsByTagName("input")[0]
    var digitalHZ=digitalpumpVFD.getElementsByTagName("input")[1]
    var digitalVAC=digitalpumpVFD.getElementsByTagName("input")[2]
    digitalCI.value=DataPump[DataPump.length-1].CI
    digitalHZ.value=DataPump[DataPump.length-1].HZ
    digitalVAC.value=DataPump[DataPump.length-1].VAC


   DataPump.shift()

}




function showSource()
{
  sourceDiv.style.visibility="visible"
  sourceDiv.style.height=+sourceDiv.scrollHeight+"px"

  closeSourceButton.disabled=false

  var frameHeight=container.scrollHeight+100

    d3.select(parent.frame4).transition().duration(1000).attr("height",frameHeight)


}

function closeSource()
{
   d3.select("#sourceDiv").transition().duration(1000).style("height","1px")
   setTimeout('sourceDiv.style.visibility="hidden"',1000)
  closeSourceButton.disabled=true

   d3.select(parent.frame4).transition().duration(1000).attr("height",880)
}



</script>

</body>

</html>